<head>
    <link rel="stylesheet" href="./lvsco.css">

</head>

<body>
    <div class="demo">
        <img src="./demo.jpg" alt="233">
    </div>
    <div class="full-box">
        <div class="left">
            <div class="left-top">
                <img src="https://img.moegirl.org.cn/common/8/81/Class_Memories_Phigros.png" alt="{{illustration}}">
            </div>
            <div class="left-content">
                <div class="left-content-left">
                </div>
                <div class="left-content-right"></div>
            </div>
            <div class="left-mid">
                <div class="left-mid-box-true">
                    <div class="rank-left">
                        <p>AT</p>
                    </div>
                    <div class="rank-right">
                        <p>250 charts</p>
                    </div>
                </div>
                <div class="left-mid-box-false">
                    <div class="rank-left">
                        <p>IN</p>
                    </div>
                    <!-- <div class="rank-right">
                        <p>250 charts</p>
                    </div> -->
                </div>
                <div class="left-mid-box-true">
                    <div class="rank-left">
                        <p>HD</p>
                    </div>
                    <div class="rank-right">
                        <p>250 charts</p>
                    </div>
                </div>
                <div class="left-mid-box-false">
                    <div class="rank-left">
                        <p>EZ</p>
                    </div>
                    <!-- <div class="rank-right">
                        <p>250 charts</p>
                    </div> -->
                </div>
            </div>
            <div class="left-mid-bottom"></div>
            <div class="createdbox">
                <div class="phi-plugin">
                    <p>{{_plugin}}</p>
                </div>
                <div class="ver">
                    <p>{{Version.ver}}</p>
                </div>
            </div>
        </div>
        <div class="left-up">
            <div class="left-top">
                <div class="illustration">
                    <img src="https://img.moegirl.org.cn/common/8/81/Class_Memories_Phigros.png" alt="{{illustration}}">
                </div>
                <div class="user_info">
                    <div class="info_up">
                        <div class="avatar">
                            <img src="../avatar/Aphasia.png" alt="{{avatar}}">
                        </div>
                        <div class="basic_info">
                            <div class="user_name">
                                <p name="pvis" id="user-name">就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你就是不会告诉你</p>
                            </div>
                            <div class="user_rks">
                                <div class="player_rks">
                                    <p>14.5678</p>
                                </div>
                                <div class="Challenge">
                                    <img src="../otherimg/5.png" alt="Challenge">
                                    <p>54</p>
                                </div>
                            </div>
                        </div>
                        <div class="user_info_right"></div>
                    </div>
                </div>
                <div class="difficulty_box">
                    <div class="difficulty_box_p">
                        <p>已选定数区间</p>
                    </div>
                    <div class="difficulty_value" style="margin-left: 25%;">
                        <p>1.8</p>
                    </div>
                    <div class="difficulty_bar-out">
                        <div class="difficulty_bar-in" style="margin-left: 25%;width: 10%;"></div>
                    </div>
                    <div class="difficulty_value" style="margin-left: 35%;">
                        <p>2.8</p>
                    </div>
                </div>
            </div>
            <div class="left-content">
                <div class="left-content-left">
                    <p>CONTENT</p>
                </div>
                <div class="left-content-right"></div>
            </div>
            <div class="left-mid">
                <div class="left-up-mid-box-true">
                    <div class="rank-left">
                        <p>AT</p>
                    </div>
                    <div class="rank-right">
                        <p>250 charts</p>
                    </div>
                </div>
                <div class="left-up-mid-box-false">
                    <div class="rank-left">
                        <p>IN</p>
                    </div>
                    <!-- <div class="rank-right">
                        <p>250 charts</p>
                    </div> -->
                </div>
                <div class="left-up-mid-box-true">
                    <div class="rank-left">
                        <p>HD</p>
                    </div>
                    <div class="rank-right">
                        <p>250 charts</p>
                    </div>
                </div>
                <div class="left-up-mid-box-false">
                    <div class="rank-left">
                        <p>EZ</p>
                    </div>
                    <!-- <div class="rank-right">
                        <p>250 charts</p>
                    </div> -->
                </div>
            </div>
            <div class="left-up-mid-bottom"></div>
        </div>

        <div class="right" id="phi">
            <div class="file-content">
                <div class="file-content-left">
                    <p>FILE_CONTENT</p>
                </div>
                <div class="progress_bar-out">
                    <!-- <div class="progress_bar-in-phi" style="width: 20%;"> -->
                    <div class="progress_bar-in-phi">
                        <p>29% PHI.</p>
                    </div>
                    <div class="progress_bar-in-fc">
                        <p>32% FullCombo.</p>
                    </div>
                </div>
            </div>
            <div class="right_title">
                <p>TOT</p>
                <div class="title_group">
                    <div class="title_group-real">
                        <p>255</p>
                    </div>
                    <div class="title_group-tot">
                        <p>/360 songs</p>
                    </div>
                </div>
                <div class="title_group">
                    <div class="title_group-real">
                        <p>255</p>
                    </div>
                    <div class="title_group-tot">
                        <p>/360 charts</p>
                    </div>
                </div>
            </div>
            <div class="right_content">
                <div class="right_content-title">
                    <p>收集日期</p>
                </div>
                <p>2023/8/26 23:14</p>
                <div class="right_content-title">
                    <p>保管单位</p>
                </div>
                <p>胡桃世界第一可爱</p>
                <div class="right_content-title">
                    <p>等级</p>
                </div>
                <p>{{rks.toFixed(8)}}</p>
            </div>
            <div class="tot_Rating">
                <img src="../otherimg/phi.png" alt="{{tot_Rating}}">
            </div>
            <div class="title_group" id="score">
                <div class="title_group-real" id="real-score">
                    <p>105569861</p>
                </div>
                <div class="title_group-tot" id="tot-score">
                    <p>/113000000</p>
                </div>
            </div>
            <div class="title_group" id="highest">
                <div class="title_group-real" id="real-highlow">
                    <p>14.0000</p>
                </div>
                <div class="title_group-tot" id="tot-highlow">
                    <p>Highest</p>
                </div>
            </div>
            <div class="title_group" id="lowest">
                <div class="title_group-real" id="real-highlow">
                    <p>14.0000</p>
                </div>
                <div class="title_group-tot" id="tot-highlow">
                    <p>Lowest</p>
                </div>
            </div>
            <div class="tot_acc-box">
                <div class="tot_acc-left">
                    <span style="color: rgb(0, 132, 255);">100</span>
                </div>
                <div class="tot_acc-right">
                    <span id="acc_word">ACC</span>
                    <span style="color: rgb(0, 132, 255);">.9999%</span>
                </div>
            </div>
            <div class="stats-rating-group">
                <div class="rating-group">
                    <div class="rating-value">
                        <p>189</p>
                    </div>
                    <div class="rating-tatle">
                        <p>Cleared</p>
                    </div>
                </div>
                <div class="rating-group">
                    <div class="rating-value">
                        <p>189</p>
                    </div>
                    <div class="rating-tatle">
                        <p>FC</p>
                    </div>
                </div>
                <div class="rating-group">
                    <div class="rating-value">
                        <p>189</p>
                    </div>
                    <div class="rating-tatle">
                        <p>PHI</p>
                    </div>
                </div>
            </div>
            <div class="rating_stats">
                <div class="rating_stats_group">
                    <img src="../otherimg/phi.png" alt="phi">
                    <p>20</p>
                    <div class="rating_stats_bar" style="height: 50%;"></div>
                </div>
                <div class="rating_stats_group">
                    <img src="../otherimg/FC.png" alt="FC">
                    <div class="rating_stats_bar" style="height: 50%;"></div>
                </div>
                <div class="rating_stats_group">
                    <img src="../otherimg/V.png" alt="V">
                    <div class="rating_stats_bar" style="height: 50%;"></div>
                </div>
                <div class="rating_stats_group">
                    <img src="../otherimg/S.png" alt="S">
                    <div class="rating_stats_bar" style="height: 50%;"></div>
                </div>
                <div class="rating_stats_group">
                    <img src="../otherimg/A.png" alt="A">
                    <div class="rating_stats_bar" style="height: 50%;"></div>
                </div>
                <div class="rating_stats_group">
                    <img src="../otherimg/B.png" alt="B">
                    <div class="rating_stats_bar" style="height: 50%;"></div>
                </div>
                <div class="rating_stats_group">
                    <img src="../otherimg/C.png" alt="C">
                    <div class="rating_stats_bar" style="height: 50%;"></div>
                </div>
                <div class="rating_stats_group">
                    <img src="../otherimg/F.png" alt="F">
                    <div class="rating_stats_bar" style="height: 50%;"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function isBiggerThanParent(songName, parentElement) {
            return songName.scrollWidth > parentElement.offsetWidth || songName.scrollHeight > parentElement.offsetHeight
        }
        function adjustFontSize() {
            //获取p元素
            let a = document.getElementsByName('pvis')
            for (let i = 0; i < a.length; ++i) {

                let songName = a[i]

                if (!songName) continue


                /*调整曲目名称字体大小*/
                let parentElement = songName.parentElement

                if (!isBiggerThanParent(songName, parentElement)) continue

                let fontSize = Number(window.getComputedStyle(songName, null).getPropertyValue('font-size').replace("px", ""));

                let l = 0, r = fontSize;
                while (l < r) {
                    let mid = Math.floor((l + r + 1) / 2);
                    songName.style.fontSize = mid + "px";
                    if (isBiggerThanParent(songName, parentElement)) {
                        r = mid - 1;
                    } else {
                        l = mid;
                    }
                }
                songName.style.fontSize = l + "px";
            }

        }
        window.onload = adjustFontSize
        window.onresize = adjustFontSize
    </script>
</body>